<template>
  <div id="playlist" :class="{show: showPlaylist}" @click.self="showPlaylist = false">
    <div class="content">
      <div class="header">
        <div class="desc">
          <div class="title">当前播放</div>
          <div class="count">{{playList.length}}首</div>
        </div>
        <div class="clear" @click="clear">
          <icon-svg icon-class="shanchu1" />
        </div>
      </div>
      <div class="list" ref="scroll">
        <transition-group name="list-complete" tag="ul">
          <item v-for="item in playList" :key="item.id" :data="item" />
        </transition-group>
      </div>

      <div class="close" @click="showPlaylist = false">关闭</div>
    </div>
  </div>
</template>

<script>
import item from './item'
import { debounce } from 'common/js/utils'
import BScroll from '@better-scroll/core'

export default {
  name: 'playlist',
  data () {
    return {
      scroll: null
    }
  },
  created () {
    window.playlist = this
  },
  mounted () {
    setTimeout(this._initScroll, 20)
  },
  methods: {
    _initScroll () {
      if (!this.$refs.scroll) return
      this.scroll = new BScroll(this.$refs.scroll, {
        probeType: 0,
        click: true,
        scrollY: true,
        mouseWheel: this.mouseWheel,
        bounceTime: 400
      })
    },
    clear () {
      this.showPlaylist = false
      this.$audio.playing = false
      this.$store.dispatch('player/setCurrentMusic', {})
      this.$store.dispatch('player/setPlayList', [])
    }
  },
  watch: {
    showPlaylist (val) {
      if (val) {

      }
    },
    playList: debounce(function () {
      this.scroll && this.scroll.refresh()
    }, 20)
  },
  computed: {
    showPlaylist: {
      get () {
        return this.$store.state.player.showPlaylist
      },
      set (value) {
        this.$store.dispatch('player/change_state', { key: 'showPlaylist', value })
      }
    },
    playList () {
      return this.$store.state.player.playList
    }
  },
  components: { item }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";
  @import "~common/style/mixins.less";

  #playlist {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.4);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
    z-index: 200;
    > .content {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: @color-background;
      min-height: 200px;
      transform: translateY(100%);
      transition: all .3s;
      border-top-right-radius: 18px;
      border-top-left-radius: 18px;
      overflow: hidden;
      .header {
        padding: 25px 12px 6px 38px;
        text-align: left;
        display: flex;
        align-items: center;
        background: @color-base;
        .desc {
          flex: 1;
          .title {
            padding: 2px 0;
            color: @color-text;
            font-size: @font-size-large;
            font-weight: bold;
          }
          .count {
            padding: 2px 0;
            color: @color-text-d;
            font-size: @font-size-medium;
          }
        }
        .clear {
          padding-right: 16px;
          color: @color-theme;
          font-size: @font-size-large;
          .extend-click();
        }
      }
      .list {
        max-height: 240px;
        overflow: hidden;
      }
      .close {
        height: 48px;
        line-height: 48px;
        background: @color-base;
        color: @color-text;
        font-size: @font-size-medium;
      }
    }
  }
  #playlist.show {
    opacity: 1;
    pointer-events: auto;
    > .content {
      transform: translateY(0);
    }
  }

  .list-complete-enter, .list-complete-leave-to { opacity: 0 }
  .list-complete-enter { transform: translateY(100%) }
  .list-complete-leave-to { transform: translateX(100%) }
  .list-complete-leave-active { position: absolute }
</style>
